<template>
	<view class="control">
		<!-- 头部 -->
		<view class="header">
			<image mode="widthFix"
				src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/6693ff9cb5152cbdf72af8d10c0b9c86bc807748.png">
			</image>
			<view class="info-box">
				<nav-bar title="暑期游泳班"></nav-bar>
				<view class="info">
					<view>
						<view class="flex-space-between">
							<view class="title">第一节|水中道理</view>
						</view>
						<view class="flex-align tag-list">
							<view class="tag">暑期游泳课程</view>
							<view class="tag">时长2小时</view>
						</view>
					</view>
					<view class="flex-align">
						<view class="info-item">
							<van-icon name="location" size="20rpx" />
							<text>大连体育馆第一用词</text>
						</view>
						<view class="info-item">
							<van-icon name="clock" size="20rpx" />
							<text>2021/12/15 12:00-13:00</text>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="con">
			<image mode="aspectFit" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/037a0b776f8b51a225fdf5eb6b8136801f84ba1b.png"></image>
			<view>暂未排课</view>
		</view>

		<view class="footer">
			<view class="btn" @click="href">立即排课</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {


			}
		},
		methods: {
			href(){
				uni.navigateTo({
					url:"/page_admin/coach-side/class-home/class-sub/class-add"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.control {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.header {
			position: relative;

			image {
				width: 100%;
				display: block;
			}

			.info-box {
				position: absolute;
				left: 0;
				height: 100%;
				width: 100%;
				top: 0;
				display: flex;
				flex-direction: column;

				.info {
					padding: 30rpx 30rpx;
					display: flex;
					flex: 1;
					flex-direction: column;
					justify-content: space-between;

					.title {
						color: rgb(51, 51, 51);
						font-size: 30rpx;
						font-weight: 700;
					}

					.state {
						color: rgb(51, 51, 51);
						font-size: 28rpx;
						font-weight: 500;
					}

					.tag-list {
						margin-top: 21rpx;

						.tag {
							padding: 5rpx 20rpx 5rpx;
							font-size: 24rpx;
							font-weight: 500;
							background-color: rgb(255, 255, 255);
							border-radius: 40.5rpx;
							color: rgb(41, 166, 241);
							margin-right: 20rpx;

							&:nth-of-type(2) {
								color: rgb(255, 143, 5);
							}
						}
					}

					.info-item {
						margin-right: 50rpx;
						color: rgb(51, 51, 51);
						font-size: 20rpx;
						font-weight: 500;

						&:last-of-type {
							margin-left: 0;
						}

						text {
							margin-left: 4rpx;
						}
					}
				}
			}
		}

		.con {
			flex: 1;
			height: 0;
			display: flex;
			padding-top: 70rpx;
			flex-direction: column;
			align-items: center;
			image{
				width: 287rpx;
				height: 287rpx;
			}
			view{
				color: rgb(153,153,153);
				  font-size: 28rpx;
				  margin-top: 24rpx;
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 20rpx 20rpx;
			box-sizing: border-box;
			box-shadow: 0px -8rpx 51rpx rgba(0,0,0,0.04);

			.btn {
				color: rgb(255, 255, 255);
				background-image: linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%);
				border-radius: 60rpx;
				padding: 26rpx 0;
				font-size: 30rpx;
				text-align: center;
				font-weight: 700;
			}

		}
	}
</style>
